import React, { useEffect, useState } from "react";
import { Breadcrumb, Table } from "antd";

import { getUserList } from "../../../api/index";

import timestampToTime from "../../../utils/timestampToTime";

const Index = () => {
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    getUserList().then((res) => {
      if (res) {
        console.log(res.data);
        setDataSource(res.data);
      }
    });
  }, []);

  const columns = [
    {
      title: "昵称",
      dataIndex: "nickname",
    },
    // {
    //   title: "头像",
    //   dataIndex: "avatar",
    //   render(text) {
    //     return <Image src={text} />;
    //   },
    // },
    {
      title: "手机号",
      dataIndex: "tel",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      render(text) {
        // 显示的是时间戳转成日期的格式
        return <span>{timestampToTime(+text)}</span>;
      },
    },
  ];

  return (
    <div>
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "账号管理",
          },
          {
            title: "用户列表",
          },
        ]}
      />

      <Table dataSource={dataSource} columns={columns} rowKey="userid" />
    </div>
  );
};

export default Index;
